<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form label-position="top">
            <el-form-item label="图片方式">
                <el-radio-group v-model="curComponent.propValue.fileType" size="mini">
                    <el-radio :label="0" size="mini">点击上传</el-radio>
                    <el-radio :label="1" size="mini">素材库</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="图片上传" v-show="curComponent.propValue.fileType == 0">
                <el-upload class="avatar-uploader" :show-file-list="false" :action="url" :headers="header"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="curComponent.propValue.url" :src="curComponent.propValue.url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="图片上传" v-show="curComponent.propValue.fileType == 1">
                <el-button type="primary" @click="dialogTableVisible = true">图片选择<i
                        class="el-icon-upload el-icon--right"></i></el-button>
            </el-form-item>

            <!-- <el-form-item label="镜像翻转">
                <div style="clear: both;">
                    <el-checkbox v-model="curComponent.propValue.flip.horizontal" label="horizontal">水平翻转</el-checkbox>
                    <el-checkbox v-model="curComponent.propValue.flip.vertical" label="vertical">垂直翻转</el-checkbox>
                </div>
            </el-form-item> -->

            <el-form-item label="圆角">
                <el-input v-model="curComponent.propValue.border" placeholder="请输入内容"></el-input>
            </el-form-item>

        </el-form>


        <el-dialog title="图片列表" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" height="500px">
                <el-table-column label="文件展示" align="center" prop="fileUrl">
                    <template #default="scope">
                        <video v-if="scope.row.fileSuffix == 'video/mp4'" type="video/mp4"
                            style="width: 100px; height: 100px" :src="scope.row.fileUrl"></video>
                        <el-image v-else style="width: 100px; height: 100px" :src="scope.row.fileUrl"
                            fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable="custom">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="name" label="文件名称" width="200"></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="选择" placement="top">
                            <el-button v-hasPermi="['iot:file:remove']" link size="mini" type="text"
                                @click="handleSelect(scope.row)">选择</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                :total="total" @pagination="getFile" />
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import CommonAttr from '../common/CommonAttr.vue'
import { list } from '@/api/file';
import { re } from 'mathjs';
export default {
    components: { CommonAttr },
    computed: {
        curComponent() {
            console.log(this.$store.state.curComponent)
            return this.$store.state.curComponent
        },
    },
    data() {
        return {
            url: process.env.VUE_APP_BASE_API + '/iot/upload',
            header: {
                Authorization: 'Bearer ' + getToken(),
                clientid: process.env.VUE_APP_CLIENT_ID
            },
            gridData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: "",
                createTime: ""
            },
            total: 0,
            dialogTableVisible: false
        }
    },
    mounted() {
        this.getFile()
    },
    methods: {
        getFile() {
            list({
                pageNum: 1,
                pageSize: 10
            }).then((res) => {
                this.gridData = res.rows
                this.total = res.total
            });
        },
        handleAvatarSuccess(res, file) {
            this.$store.state.curComponent.propValue.url = res.data.url
            console.log(this.$store.state.curComponent)
            this.$store.commit('setCurComponentNew', this.$store.state.curComponent)
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
        },
        handleSelect (file) {
            if (file.fileSuffix == 'video/mp4') {
                this.$message.error('不允许选择视频');
                return;
            }
            this.$store.state.curComponent.propValue.url = file.fileUrl
            this.dialogTableVisible = false
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
